<template>
  <div class="sampleComparison tapStyle secondary-page-mode">
    <div class="secondary-toolbar">
      <span>时间选择 : </span>
      <div class="layoutBox" style="width:370px">
        <el-date-picker
          v-model="dateRange"
          type="datetimerange"
          start-placeholder="开始日期"
          format = 'yyyy-MM-dd HH:00:00'
          value-format = 'yyyy-MM-dd HH:00:00'
          end-placeholder="结束日期">
        </el-date-picker>
      </div>&emsp;&emsp;
      <span>监测项目 : </span>
      <div class="layoutBox" style="width:190px">
        <el-select v-model="value" placeholder="请选择">
          <el-option
            v-for="item in optionData"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
      </div>&emsp;&emsp;
      <el-button @click="search"><i class="iconfont icon-sousuo"></i>查询</el-button>
      <el-button @click="exportExcel()" type='delet'><i class="iconfont icon-daochu"></i>导出</el-button>
    </div>
    <div class="currency-mode-wrap scrollSpecial">
      <div class="reminder-wrap">
        <!-- <span class="reminder-title">温馨提示</span>
        <div class="reminder-content">
          <div class="reminder-text">
            <p>所选时间段内共有“多点线性核查移”x次，共有合格项m次，不合格项y次。影响数据n条。点位1、点位2的上次周核查时间距今已有7天；站点3的上次周核查距今已有6天。</p>
            <div><el-button type="noticonsecondBtn"> 生成任务 </el-button></div>
          </div>
        </div> -->
        <div class="reminder-toolbar">
          <div class="state-legend">
            <span><i class="qualified-icon"></i> 合格</span>
            <span><i class="unqualified-icon"></i> 不合格</span>
          </div>
        </div>
      </div>
      <div class="currency-body-toggle">
        <div class="tablebox" style="height: calc(100% - 35px)">
          <el-table
            :data="tableData"
            ref="table"
            border
            height="100%"
            >
            <el-table-column
              type="index"
              label="序号">
            </el-table-column>
            <el-table-column
              prop="time"
               width='178'
              label="日期">
            </el-table-column>
            <el-table-column
              v-for="(item,index) in tableHeader"
              :key="index"
              :label="item.name">
              <el-table-column
                label="测定结果（mg/L）">
                <el-table-column
                  :prop="item.propA"
                  label="系统">
                </el-table-column>
                <el-table-column
                  :prop="item.propB"
                  width='120'
                  :label="item.subName">
                </el-table-column>
              </el-table-column>
              <el-table-column
                :prop="item.propC"
                :formatter="addPer"
                :label="item.errorName">
              </el-table-column>
              <el-table-column
                :prop="item.propD"
                width='120'
                :label="item.errorRangeName">
              </el-table-column>
            </el-table-column>
            <!--<el-table-column
              label="量程校正液核查">
              <el-table-column
                label="测定结果（mg/L）">
                <el-table-column
                  prop="spanValue"
                  label="系统">
                </el-table-column>
                <el-table-column
                  prop="spanStandardSamplesValue"
                  width='120'
                  label="量程校正液浓度">
                </el-table-column>
              </el-table-column>
              <el-table-column
                prop="spanCheckRelativeError"
                label="相对误差">
              </el-table-column>
              <el-table-column
                prop="spanCheckRelativeTechnicalRequirement"
                width='120'
                label="相对误差范围">
              </el-table-column>
            </el-table-column>-->
          </el-table>
        </div>
        <div class="paginationBox">
          <el-pagination
            @size-change="paginationSizeChange"
            @current-change="paginationChange"
            :current-page.sync="currentPage"
            :page-size="pageSize"
            background
            :small = "true"
            popper-class = "select-common-option"
            :page-sizes = "pageList"
            layout="total,sizes,slot,->,prev, pager, next, jumper"
            :total="totalRecords">
            <span class="el-pagination__current">当前第{{currentPage}}/{{totalPage}}页</span>
          </el-pagination>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import {exportTableData} from '../../assets/js/tableExport'
  export default {
    name: "sampleComparison",
    data() {
      return {
        dateRange: '',
        value: "w01019",
        optionData: [],
        optionDataA:[
          {
            value: "w01019",
            label: "高锰酸盐"
          },
          {
            value: "w21003",
            label: "氨氮"
          },
          {
            value: "w21011",
            label: "总磷"
          },
          {
            value: "w21001",
            label: "总氮"
          }
        ],
        optionDataB:[
          {
            value: "w01018",
            label: "CODcr"
          },
          {
            value: "w21003",
            label: "氨氮"
          },
          {
            value: "w21011",
            label: "总磷"
          },
          {
            value: "w21001",
            label: "总氮"
          }
        ],
        currentPage: 1, //分页组件当前页
        pageSize: 10, //分页每页多少条数据
        totalRecords: 0, //总条数
        pageList: [10, 15, 20], //设置每页多少条
        tableData: [],
        stateRadio: "1",
        stationId:'',
        stationType:false,
        fieldList:[],
        fieldListA:['time','zeroValue','zeroStandardSamplesValue',
          'zeroAbsoluteError','zeroAbsoluteTechnicalRequirement','spanValue',
          'spanStandardSamplesValue','spanCheckRelativeError','spanCheckRelativeTechnicalRequirement'],
        fieldListB:['time','spanValue',
          'spanStandardSamplesValue','spanCheckRelativeError','spanCheckRelativeTechnicalRequirement'],
        stationName:"",
        tableHeader:[],
        tableHeaderA:[
          {
            name:"零点校正液核查",
            subName:'零点校正液浓度',
            errorName:"绝对误差",
            errorRangeName:"绝对误差范围",
            propA:'zeroValue',
            propB:'zeroStandardSamplesValue',
            propC:'zeroAbsoluteError',
            propD:'zeroAbsoluteTechnicalRequirement',
          },{
            name:"量程校正液核查",
            subName:'量程校正液浓度',
            errorName:"相对误差",
            errorRangeName:"相对误差范围",
            propA:'spanValue',
            propB:'spanStandardSamplesValue',
            propC:'spanCheckRelativeError',
            propD:'spanCheckRelativeTechnicalRequirement',
          }
        ],
        tableHeaderB:[
          {
            name:"零点校正液核查",
            subName:'零点校正液浓度',
            errorName:"绝对误差",
            errorRangeName:"绝对误差范围",
            propA:'zeroValue',
            propB:'zeroStandardSamplesValue',
            propC:'zeroAbsoluteError',
            propD:'zeroAbsoluteTechnicalRequirement',
          },
          {
            name:"量程校正液核查",
            errorName:"相对误差",
            subName:'量程校正液浓度',
            errorRangeName:"相对误差范围",
            propA:'spanValue',
            propB:'spanStandardSamplesValue',
            propC:'spanCheckRelativeError',
            propD:'spanCheckRelativeTechnicalRequirement',
          }
        ],
      };
    },
    computed: {
      totalPage() {
        //计算总页数
        let number = 0;
        number = Math.ceil(this.totalRecords / this.pageSize);
        return number === 0 ? 1 : number;
      },
      stationInfo: {
        get: function() {
          return this.$store.state.stationInfo;
        }
      }
    },
    methods: {
      addPer(row, column, cellValue, index){
        
          if(column.label == '相对误差' && cellValue != '' && cellValue != '-'){
              return cellValue + '%'
          }else{
            return cellValue
          }
      },
      paginationChange(val) {
        //分页页码改变时执行
        this.currentPage = val;
        this.getSpanCheckData();
      },
      //分页pageSize改变时执行
      paginationSizeChange(val) {
        this.pageSize = val;
        this.getSpanCheckData();
      },
      toggleTable(item) {
        if (item.toggle) {
          item.toggle = false;
        } else {
          item.toggle = true;
        }
      },
      toggleTab(val) {
        // console.log(val);
      },
      search(){
        this.getSpanCheckData();
      },
      getSpanCheckData(){
        this.$http.get("/Quality/CQtestData/zeroSpanCheckData", {
          params: {
            startTime: this.dateRange[0],
            endTime: this.dateRange[1],
            indexCodes: this.value,
            stationCodes: this.stationId, //this.stationId
            ifCurrentSection: true,// true为当前断面,false为所有
            pageNumber: this.currentPage,
            pageSize: this.pageSize,
          }
        }).then(res=>{
          if(res.data.code === 0){
            console.log(res);
            this.tableData = res.data.content.dataList;
            this.totalRecords = res.data.content.totalRecords;
          }
        });
      },
      setOptionData(){
        if(this.stationType){
          this.optionData = this.optionDataB;
          this.value =  "w01018";
        }else{
          this.optionData = this.optionDataA;
          this.value =  "w01019";
        }
        this.getSpanCheckData();
      },

      filterOptionData(code){
        for (let i=0; i < this.optionData.length; i++){
          if(this.optionData[i].value === code){
            return this.optionData[i].label;
          }
        }
      },
      //导出表格
      exportExcel(){
        let {table} = this.$refs;
        let tableBox = table.$el;
        let header = tableBox.querySelector('.el-table__header');
        let title = this.stationName + this.filterOptionData(this.value)+'零点和量程核查';
        let params = {
          headerProp:this.fieldList.join(','),
          startTime: this.dateRange[0],
          endTime: this.dateRange[1],
          indexCodes: this.value,
          stationCodes: this.stationId,
          ifCurrentSection: true,
          tableType:'ZERO_SPAN_CHECK_DATA',
          pattern:'yyyy-MM-dd HH:mm:ss'
        };
        exportTableData(header,title,'','1',"/Quality/exports/testDataExcel",params);
      }
    },
    mounted() {

    },
    created() {
      //初始化时间
      let startTime = new Date().setDate(new Date().getDate() - 30);
      let endTime = new Date();
      this.dateRange = [
        new Date(startTime).format("yyyy-MM-dd hh:00:00"),
        endTime.format("yyyy-MM-dd hh:00:00")
      ];
    },
    watch: {
      stationInfo(value) {
        if (value.length > 0) {
          this.stationId = value[0].nodeId;
          this.stationName = value[0].nodeName;
          if(value[0].stationType1 === '002'){
            this.stationType = true;
            this.tableHeader = this.tableHeaderB;
            this.fieldList = this.fieldListB;
          }else{
            this.stationType = false;
            this.tableHeader = this.tableHeaderA;
            this.fieldList = this.fieldListA;
          }
          this.setOptionData();
        }
      }
    }
  };
</script>

<style scope lang="less">
  .sampleComparison {
    .tablebox {
      height: 100%;
    }
    .table-head,
    .table-body {
      table {
        width: 100%;
        border-collapse: collapse;
        td,
        th {
          border: 1px solid #d6e3f2;
          padding: 0 3px;
          height: 30px;
          text-align: center;
        }
        th{
          font-weight: 100;
        }
      }
      .toggle-row {
        height: 30px;
        line-height: 30px;
        padding-left: 6px;
        border-left: 1px solid #d6e3f2;
        border-right: 1px solid #d6e3f2;
        border-bottom: 1px solid #d6e3f2;
        &.active {
          /*border-bottom: none;*/
        }
      }
    }
    .table-body {
      table {
        margin-top: -1px;
      }
    }
    .toggle-icon {
      display: inline-block;
      vertical-align: middle;
      margin-bottom: 3px;
      width: 13px;
      height: 13px;
      background: url("../../assets/images/retract-toggle.png") no-repeat;
      cursor: pointer;
      &.active {
        background: url("../../assets/images/open-toggle.png") no-repeat;
      }
    }
  }
</style>
